<template>
	<view>
		<view class="content">
			<!-- 轮播图 -->
			<view class=" u-flex-col u-row-between u-p-t-30 u-p-b-30">
				<u-swiper :list="list" height="270" :effect3d="true"></u-swiper>
			</view>
			<!-- 头部导航栏 -->
			<view class="index_menu u-p-t-20 u-p-l-10 u-p-r-10 u-p-b-28">
				<view class="index_title u-flex-col u-col-center">
					<view class="index_title_top u-flex u-row-center u-m-b-10">
						<u-image width="59rpx" height="51rpx" src="/static/images/index/titlewrap.png"></u-image>
						<text class="text u-m-l-10 u-m-r-10">辰山植物园</text>
						<u-image width="59rpx" height="51rpx" src="/static/images/index/titlewrap.png"></u-image>
					</view>
					<view class="index_title_center u-flex u-row-center u-m-b-6">
						<view class="moni_tag u-m-r-15">
							<text>
								5A
							</text>
						</view>
						<text class="text">7:30-18:30 </text>
					</view>
					<view class="index_title_bottom  u-flex u-row-center u-m-b-20">
						<u-image class="u-m-r-15" width="19rpx" height="26rpx" src="/static/images/index/dingwei.png">
						</u-image>
						<text class="text">上海市松江区林湖路8888号</text>
					</view>
				</view>
				<u-grid :col="4" :border="false">
					<u-grid-item>
						<u-image width="68rpx" height="68rpx" src="/static/images/index/grid1.png"></u-image>
						<view class="grid-text u-m-t-18">详情介绍</view>
					</u-grid-item>
					<u-grid-item>
						<u-image width="68rpx" height="68rpx" src="/static/images/index/grid2.png"></u-image>
						<view class="grid-text u-m-t-18">位置导航</view>
					</u-grid-item>
					<u-grid-item>
						<u-image width="68rpx" height="68rpx" src="/static/images/index/grid3.png"></u-image>
						<view class="grid-text u-m-t-18">联系我们</view>
					</u-grid-item>
					<u-grid-item>
						<u-image width="68rpx" height="68rpx" src="/static/images/index/grid4.png"></u-image>
						<view class="grid-text u-m-t-18">游览须知</view>
					</u-grid-item>
				</u-grid>
			</view>
			<!-- 商品栏 -->
			<view class="index_card">
				<u-card class="my_card" :border="false" :head-border-bottom="false" v-for="(item,index) in goodsList"
					:key="index">
					<view slot="head">
						<view class="u-head-item u-flex u-row-between u-p-t-0">
							<view class="u-head-item_left">
								<text>{{item.title}}</text>
							</view>
							<view class="u-head-item_right">
								<view class="u-flex u-row-center">
									<view class="">
										<text>展开更多</text>
									</view>
									<u-image width="17rpx" height="17rpx" src="/static/images/index/arow.png"></u-image>
								</view>
							</view>
						</view>
					</view>
					<view class="" slot="body">
						<view class="u-body-item u-flex u-row-between u-p-t-32 u-p-l-30 u-p-r-30 u-p-b-28 u-m-b-20"
							v-for="(val,idx) in item.ticketArr" :key="idx">
							<view class="u-body-item_left u-flex-col u-row-start">
								<view class="title u-m-b-10">
									<text>
										{{val.ticketName}}
									</text>
								</view>
								<view class="tags_group u-m-b-18">
									<u-tag class="my_tag u-p-0 u-m-r-10" color="#178975" bg-color="#F3F8F7"
										v-for="(v,i) in val.tipsContentArr" :key="i" border-color="#178975" :text="v" />
								</view>
								<view class="tips u-flex ">
									<view class="">
										<text>预定须知</text>
									</view>
									<u-image width="17rpx" height="17rpx" src="/static/images/index/arow.png"></u-image>
								</view>
							</view>
							<view class="u-body-item_right u-flex-col u-col-bottom">
								<view class="price u-m-b-20">
									<text>
										¥
									</text>
									<text class="big">
										{{val.price}}
									</text>
									<text>
										/张
									</text>
								</view>
								<view class="button_wrap">
									<u-button>立即购买</u-button>
								</view>
							</view>
						</view>
					</view>
				</u-card>
			</view>
			<!-- 底部logo -->
			<MyLogo/>
			<u-tabbar :list="vuex_tabbarlist"></u-tabbar>
		</view>
	</view>
</template>

<script>
	import {
		getData
	} from '@/api/index.js'
	import MyLogo from "@/components/MyLogo/index.vue"
	export default {
		components:{
			MyLogo,
		},
		data() {
			return {
				list: [{
						image: 'http://reserve.auroramuseum.cn/imgs/crop/360/213/20201106/0f003ca7-6c42-48a8-8576-d8c300c98cbc.jpg',
					},
					{
						image: 'http://reserve.auroramuseum.cn/imgs/crop/468/277/20210207/6a041388-17df-40b2-91ca-13f4414e16c7.jpg',
					},
					{
						image: 'http://reserve.auroramuseum.cn/imgs/crop/468/277/20210127/5cf14539-e9d0-4391-9535-eb8d56edb779.jpg',
					}
				],
				goodsList: [{
						title: "植物园大门",
						ticketArr: [{
								ticketName: "植物园大门成人票",
								tipsContentArr: ["随买随用", "扫码入园"],
								price: 130,
							},
							{
								ticketName: "植物园大门成人票",
								tipsContentArr: ["随买随用", "扫码入园"],
								price: 130,
							},
						],
					},
					{
						title: "牡丹花卉展",
						ticketArr: [{
							ticketName: "植物园大门成人票",
							tipsContentArr: ["随买随用", "扫码入园"],
							price: 130,
						}, ],
					}
				],
			}
		},
		onLoad() {
			this.getData()
		},
		methods: {
			getData() {

			},
			btnClick() {
				this.$u.throttle(this.getConsoleTxt, 500)
			},
			getConsoleTxt() {
				this.$toast.tip('您点击了按钮')
			}
		},
		
	}
</script>

<style lang="scss" scoped>
	.content {
		.index_menu {

			.index_title {
				.index_title_top {
					width: 100%;

					.u-image:first-of-type {
						transform: rotateY(180deg);
					}

					.text {
						font-family: PingFangSC-Medium;
						font-size: 36rpx;
						color: #178975;
						letter-spacing: 1.5rpx;
						font-weight: 600;
					}
				}

				.index_title_center {
					width: 100%;

					.moni_tag {
						width: 44rpx;
						height: 26rpx;
						line-height: 26rpx;
						background: #178975;
						border-radius: 4px;
						border-radius: 4px;
						text-align: center;
						font-family: PingFangSC-Medium;
						font-size: 20rpx;
						color: #FFFFFF;
						letter-spacing: 0.83px;
					}

					.text {
						font-family: PingFangSC-Regular;
						font-size: 24rpx;
						color: #178975;
						letter-spacing: 1rpx;
					}
				}

				.index_title_bottom {
					width: 100%;

					.text {
						font-family: PingFangSC-Regular;
						font-size: 24rpx;
						color: #178975;
						letter-spacing: 1rpx;
					}
				}
			}

			.grid-text {
				font-family: PingFangSC-Regular;
				font-size: 24rpx;
				color: #1E2221;
				letter-spacing: 1rpx;
			}

			.u-grid-item {
				background: transparentize($color: #000000, $amount: 1) !important;
			}
		}

		.index_card {
			.my_card {
				margin-top: 10px !important;

				::v-deep .u-card__head {
					padding: 30rpx 0 !important;
				}

				::v-deep .u-card__body {
					padding: 0 !important;
				}
			}

			.u-head-item {

				.u-head-item_left {
					font-family: PingFangSC-Medium;
					font-size: 36rpx;
					color: #1E2221;
					letter-spacing: 1.5rpx;
					font-weight: 600;
				}

				.u-head-item_right {
					font-family: PingFangSC-Regular;
					font-size: 26rpx;
					color: #8A8D9A;
					letter-spacing: 0.89rpx;

					.u-image {
						transform: translateY(-10rpx);
					}
				}
			}

			.u-body-item {
				width: 100%;
				height: 200rpx;
				background: #F3F8F7;
				border-radius: 6px;
				border-radius: 6px;

				.u-body-item_left {
					height: 100%;

					.title {
						font-family: PingFangSC-Regular;
						font-size: 30rpx;
						color: #1E2221;
						letter-spacing: 1.25rpx;
					}

					.tags_group {

						.my_tag {
							opacity: 0.5;
							border-radius: 6rpx;
							border-radius: 6rpx;
							width: 100rpx;
							height: 36rpx;
							font-family: PingFangSC-Regular;
							font-size: 20rpx;
							color: #178975;
							letter-spacing: 0.83rpx;
							line-height: 36rpx;
							text-align: center;
						}
					}

					.tips {
						font-family: PingFangSC-Regular;
						font-size: 24rpx;
						color: #8A8D9A;
						letter-spacing: 1rpx;

						.u-image {
							transform: translateY(-10rpx);
						}
					}

				}

				.u-body-item_right {
					height: 100%;

					.price {
						font-weight: 600;
						font-family: PingFangSC-Medium;
						font-size: 24rpx;
						color: #F02015;
						letter-spacing: 1rpx;

						.big {
							font-size: 36rpx;
							letter-spacing: 1.5rpx;
							line-height: 33px;
						}
					}

					.button_wrap {
						.u-btn {
							width: 140rpx;
							height: 56rpx;
							background: #178975;
							border-radius: 8px;
							border-radius: 8px;
							font-family: PingFangSC-Medium;
							font-size: 26rpx;
							color: #FFFFFF;
							letter-spacing: 1.09rpx;
						}
					}
				}
			}
		}
	}
</style>
